<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>过滤器</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="../js/dayjs.min.js"></script>
	</head>
	<body>
		<!-- 
				过滤器：
					概念：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
					语法：
							1.注册过滤器：Vue.filter(name,callback) ==> 全局过滤器 或 new Vue{filters:{}} ==>局部过滤器
							2.使用过滤器：{{ xxx | 过滤器名}} 
								也可以传参：{{ xxx | 过滤器名(999)}}
								也可以串联：{{ xxx | 过滤器1(666) | 过滤器2(777) |过滤器3(888)}}
					备注：
							1.过滤器也可以接收额外参数、多个过滤器也可以串联
							2.并没有改变原本的数据, 是产生新的数据
							3.过滤器回调中的this不是vm
		 -->
		<!-- 准备好一个容器-->
		<div id="demo">
			<h4>一个大日子：{{time}}</h4>
			<h4>一个大日子(methods实现)：{{handlerTime()}}</h4>
			<h4>一个大日子(computed实现)：{{time2}}</h4>
			<h4>一个大日子(过滤器实现)：{{time | guolvTime}}</h4>
			<h4>一个大日子(过滤器实现+传参)：{{time | guolvTime('YYYY @ MM-DD * HH:mm:ss')}}</h4>
			<h4>一个大日子(过滤器实现+传参+串联)：{{time | guolvTime('YYYY @ MM-DD * HH:mm:ss') | sliceTime(2) | add4Point}}</h4>
		</div>

		<div id="demo2">
			<h4>一个大日子(过滤器实现)：{{school | add4Point}}</h4>
		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false

			//配置全局过滤器（所有的vm、所有的组件，都能用）
			Vue.filter('add4Point',function(value){
				console.log('$$$$',this)
				return value + '！！！！'
			})

			let vm1 = new Vue({
				el:'#demo',
				data:{
					time:1218196800000
				},
				methods:{
					handlerTime(){
						return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss') 
					}
				},
				computed:{
					time2(){
						return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss') 
					}
				},
				//配置局部过滤器（只有当前的vm 或 当前的组件 能用）
				filters:{
					//guolvTime函数何时被调用？ —— 当该过滤器被使用的时候
					guolvTime(value,str='YYYY年MM月DD日 HH:mm:ss'){
						console.log('****',this)
						console.log('guolvTime',str)
						return dayjs(value).format(str) 
					},
					sliceTime(value,number){
						console.log('&&&&&',this)
						console.log(value,number)
						return value.slice(0,number)
					}
				}
			})

			let vm2 = new Vue({
				el:'#demo2',
				data:{
					school:'尚硅谷'
				}
			})
			
		</script>
	</body>
</html>